<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  #page {
    display: grid;
    width: 100%;
    height: 200px;
    grid-template: [header-left] "head head" 30px [header-right]
    [main-left]   "nav  main" 1fr  [main-right]
    [footer-left] "nav  foot" 30px [footer-right]
                 / 120px 1fr;
  }

  header {
    background-color: lime;
    grid-area: head;
  }

  nav {
    background-color: lightblue;
    grid-area: nav;
  }

  main {
    background-color: yellow;
    grid-area: main;
  }

  footer {
    background-color: red;
    grid-column: foot;
  }
.grid-box{

}
</style>
<body>
<section id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</section>
<div class="grid-box">
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>
</div>
<a href="javascript:void(0)" style="width: 100px;height: 30px;background-color: #00acc1" onclick="setAttribute"  id="btn">设置属性</a>

<script>
  // document.getElementById('btn').addEventListener('click',setAttribute)
  function setAttribute(e) {
    e.preventDefault()
    this.setAttribute("style",this.style.cssText+ ";display:inline-block;color:red;font-size:18px;")
    console.log(this.style.cssText)
  }
</script>
</body>
</html>
